<template>
  <el-row justify="space-between" class="button-container">
    <el-col :span="12" class="button-col">
      <el-button class="centered-button" @click="openTab">打开标签页</el-button>
    </el-col>
    <el-col :span="12" class="button-col">
      <el-button class="centered-button" @click="openSidebar"
        >打开侧边栏</el-button
      >
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

const openTab = () => {
  // @ts-ignore
  chrome.tabs.create({ url: chrome.runtime.getURL("view/newtab/index.html") });
};

const openSidebar = () => {
  // @ts-ignore
  chrome.runtime.sendMessage({ action: "openSidepanel" });
};
</script>

<style scoped lang="scss">
.PagePopup {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.button-container {
  width: 100%;
}

.button-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered-button {
  width: 100%;
  max-width: 120px;
}
</style>
